<template>
  <div class="page-background">
    <div class="page-location">
      <el-pagination background
                     @current-change="handleCurrentChange"
                     :prev-click="prePage"
                     :next-click="nextPage"
                     :current-page.sync="currentP"
                     :page-size="sizeP"
                     :total="allSize"
                     layout="prev, pager, next, jumper"
                     class="app-page">
      </el-pagination>
    </div>
  </div>
</template>

<style>
.page-location {
  left: 50%;
  position: absolute;
}
.app-page {
  position: relative;
  right: 50%;
}
.page-background {
  width: 100%;
  height: 40px;
  padding: 5px 5px;
  margin-top: 5px;
  background-color: #fff;
}
</style>

<script>
export default {
  data() {
    return {
      page: this.currentPage
    }
  },
  props: {
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 1
    }
  },
  computed: {
    currentP: {
      get: function() {
        return this.page
      },
      set: function(newValue) {
        this.page = newValue
      }
    },
    allSize() {
      return this.total
    },
    sizeP() {
      return this.pageSize
    }
  },
  methods: {
    go(page) {
      this.$emit('change', page)
    },
    prePage() {
      if (this.currentP > 1) {
        this.go(this.currentP - 1)
      }
    },
    nextPage() {
      if (this.currentP < this.allSize) {
        this.go(this.currentP + 1)
      }
    },
    handleCurrentChange() {
      this.go(this.currentP)
    }
  }
}
</script>

